@use "sass:color";
@use "sass:math";

@use '../tools/colors';
@use '../tools/variables';

$tooltip-background: #0f151c;
$tooltip-background--error: colors.$red;
$tooltip-foreground: color.adjust(#7189a8, $lightness: 3%);
$tooltip-foreground--error: #fff;
$tooltip-link-foreground: #92aac9;

$tooltip-border-radius: 3px;
$tooltip-font-size: 0.8rem;
$tooltip-line-height: 1rem;

$tooltip-padding-vertical: math.div(variables.$spacing-unit * 3, 10);
$tooltip-padding-horizontal: math.div(variables.$spacing-unit * 1, 2);

$tooltip-arrow-border-width: 7px;
$tooltip-arrow-offset: 8px;

$tooltip-anchor-offset: $tooltip-arrow-offset + $tooltip-arrow-border-width;

.tooltip {
  max-width: 600px;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  transition: opacity 0.3s, visibility 0.3s;
  visibility: hidden;
  z-index: 1000;

  &__wrapper {
    display: inline-block;
    position: relative;
  }

  &__content {
    background: $tooltip-background;
    border-radius: $tooltip-border-radius;
    color: $tooltip-foreground;
    font-size: $tooltip-font-size;
    line-height: $tooltip-line-height;
    padding: $tooltip-padding-vertical $tooltip-padding-horizontal;
    position: relative;
    user-select: none;

    &--no-padding {
      padding: 0;
    }

    &--padding-surrogate {
      padding: $tooltip-padding-vertical $tooltip-padding-horizontal;
    }

    &:after {
      border-color: $tooltip-background;
      border-style: solid;
      border-width: $tooltip-arrow-border-width;
      content: '';
      position: absolute;
    }
  }

  &.is-open {
    opacity: 1;
    visibility: visible;

    &.is-interactive {
      pointer-events: auto;
    }
  }

  &--no-wrap {
    white-space: nowrap;
  }

  &--position {
    &--bottom,
    &--top {
      &.tooltip {
        &--anchor {
          &--center {
            transform: translateX(-50%);

            .tooltip {
              &__content {
                &:after {
                  left: 50%;
                  transform: translateX(-50%);
                }
              }
            }
          }

          &--start {
            &.tooltip {
              &--align {
                &--center {
                  transform: translateX($tooltip-anchor-offset * -1);
                }
              }
            }

            .tooltip {
              &__content {
                &:after {
                  left: $tooltip-arrow-offset;
                }
              }
            }
          }

          &--end {
            transform: translateX(calc(-100% + #{$tooltip-anchor-offset}));

            .tooltip {
              &__content {
                &:after {
                  right: $tooltip-arrow-offset;
                }
              }
            }
          }
        }
      }
    }

    &--bottom {
      padding-top: $tooltip-arrow-border-width;

      .tooltip {
        &__content {
          &:after {
            border-left-color: transparent;
            border-right-color: transparent;
            border-top: none;
            bottom: 100%;
          }
        }
      }
    }

    &--top {
      padding-bottom: $tooltip-arrow-border-width;

      .tooltip {
        &__content {
          &:after {
            border-bottom: none;
            border-left-color: transparent;
            border-right-color: transparent;
            top: 100%;
          }
        }
      }
    }

    &--left,
    &--right {
      &.tooltip {
        &--anchor {
          &--center {
            top: 50%;
            transform: translateY(-50%);

            .tooltip {
              &__content {
                &:after {
                  top: 50%;
                  transform: translateY(-50%);
                }
              }
            }
          }

          &--start {
            transform: translateY($tooltip-anchor-offset * -1);

            .tooltip {
              &__content {
                &:after {
                  top: $tooltip-arrow-offset;
                }
              }
            }
          }

          &--end {
            transform: translateY(calc(-100% + #{$tooltip-anchor-offset}));

            .tooltip {
              &__content {
                &:after {
                  bottom: $tooltip-arrow-offset;
                }
              }
            }
          }
        }
      }
    }

    &--left {
      padding-right: $tooltip-arrow-border-width;

      .tooltip {
        &__content {
          &:after {
            border-bottom-color: transparent;
            border-right: none;
            border-top-color: transparent;
            left: 100%;
          }
        }
      }
    }

    &--right {
      padding-left: $tooltip-arrow-border-width;

      .tooltip {
        &__content {
          &:after {
            border-bottom-color: transparent;
            border-left: none;
            border-top-color: transparent;
            right: 100%;
          }
        }
      }
    }
  }

  &--is-error {
    .tooltip {
      &__content {
        background: $tooltip-background--error;
        color: $tooltip-foreground--error;

        &:after {
          border-top-color: $tooltip-background--error;
        }
      }
    }
  }

  a {
    color: $tooltip-link-foreground;
    text-decoration: underline;

    &:active {
      text-decoration: underline;
    }

    &:focus-visible,
    &:hover {
      color: $tooltip-link-foreground;
    }
  }
}
